<template>
  <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" size="800px">
    <div class="content">
      <div class="top">
        <div class="img">
          <img src="@/assets/logo.png" alt="" />
        </div>
        <div class="info1">
          <div class="myinput">
            <span>汉译：</span>
            <el-input v-model="userInput.Hanzi" :placeholder="drawerData.Hanzi"></el-input>
          </div>
          <div class="myinput">
            <span>音标：</span>
            <el-input v-model="userInput.Pinyin" :placeholder="drawerData.Pinyin"></el-input>
          </div>
          <div class="myinput">
            <span>编号：</span>
            <el-input v-model="userInput.MarkerID" :placeholder="drawerData.MarkerID"></el-input>
          </div>
        </div>
        <div class="info2">
          <!-- 选择器 -->
          <div class="myselect">
            <span>字体：</span>
            <el-select v-model="userInput.NormalType" :placeholder="drawerData.NormalType">
              <el-option v-for="item in fonts" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="myselect2">
            <span>类型：</span>
            <el-select v-model="userInput.RSType" :placeholder="drawerData.RSType">
              <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div class="explain">
        <span>解释</span>
        <el-input type="textarea" :rows="6" :placeholder="drawerData.FText" v-model="userInput.FText"></el-input>
      </div>

      <div class="remark">
        <span>备注</span>
        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="userInput.remark"></el-input>
      </div>

      <div class="btns">
        <el-button icon="el-icon-edit" @click="saveMsg">保存信息</el-button>
        <el-button icon="el-icon-delete">删除信息</el-button>
        <el-button icon="el-icon-switch-button" @click="drawer = false">关闭</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "myDrawer",
  data() {
    return {
      drawer: false,
      direction: "rtl",
      drawerData: {},
      fonts: [
        {
          value: "正体",
          label: "正体",
        },
        {
          value: "异体",
          label: "异体",
        },
        {
          value: "示意构体",
          label: "示意构体",
        },
        {
          value: "附加",
          label: "附加",
        },
        {
          value: "藏文",
          label: "藏文",
        },
      ],
      types: [
        {
          value: "选项1",
          label: "鬼怪类",
        },
        {
          value: "选项2",
          label: "1",
        },
        {
          value: "选项3",
          label: "2",
        },
        {
          value: "选项4",
          label: "3",
        },
        {
          value: "选项5",
          label: "4",
        },
      ],
      // 用户修改的数据
      userInput: {
        Hanzi: "",
        RSType: "",
        FText: "",
        remark: "",
        NormalType: "",
        MarkerID: "",
        Pinyin: "",
      },
    };
  },
  // props: {
  //     drawer:{
  //         type:Boolean,
  //         default:false
  //     }
  // },
  mounted() {
    console.log("我是Drawer组件：", this.drawer);
    this.userInput = this.drawerData;
  },
  methods: {
    // 保存用户输入并提交
    async saveMsg() {
      const cookie = this.$cookie.get("cookie");
      if (!cookie) {
        this.$message.warning("请先登录");
        this.$router.push("/login");
      } else {
        console.log(this.userInput);
        const res = await this.$http.put(`api/viewMarker/${this.drawerData.MarkerID}`, JSON.stringify(this.userInput));
        console.log(res);
        if (res.status == 200) {
          this.$message.success("修改成功");
          this.drawer = false;
        } else {
          this.$message.error("修改失败");
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
span {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  width: 100px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.content {
  // width: 800px;
  .top {
    display: flex;

    .img {
      margin: 20px;
      width: 200px;
      height: 150px;
      // background-color: pink;

      img {
        object-fit: scale-down;
        width: 100%;
        height: 100%;
      }
    }

    .info1 {
      margin: 20px;
      display: flex;
      flex-direction: column;
      // background-color: grey;

      .myinput {
        display: flex;
        height: 50px;
        width: 250px;
      }
    }

    .info2 {
      margin: 20px;
      display: flex;
      flex-direction: column;
      // background-color: skyblue;

      .myselect {
        display: flex;
        // margin: 20px 0;
      }

      .myselect2 {
        display: flex;
        margin: 50px 0 0 0;
      }
    }
  }

  .explain {
    margin: 0 20px;
  }

  .remark {
    margin: 10px 20px;
  }

  .btns {
    display: flexs;
  }
}
</style>
